<template>
  <div class="app-container">
    <div class="header">
      <div class="content">
        <div class="guide-container">
          <div class="guide-left">
            <div class="guide-title">
              <a style="margin-right: 8px; cursor: default;">👌</a>自由拖拽，轻松收集
            </div>
            <div class=" guide-extra">
              问卷帮你轻松完成信息收集、报名领用、登记签到，助力企业高效协同
            </div>
            <div class="quick-item-box">
              <div class="quick-item">
                <a style="margin-right: 8px;">📍</a><span>活动签到</span><i class="el-icon-arrow-right" />
              </div>
              <div class="quick-item">
                <a style="margin-right: 8px;">✏️</a><span>活动反馈问卷</span><i class="el-icon-arrow-right" />
              </div>
              <div class="quick-item">
                <a style="margin-right: 8px;">📊</a><span>产品调研问卷</span><i class="el-icon-arrow-right" />
              </div>
              <div class="quick-item">
                <a style="margin-right: 8px;">📥</a><span>更多模板</span><i class="el-icon-arrow-right" />
              </div>
            </div>
          </div>
          <div class="guide-right">
            <img
              src=""
            >
          </div>
        </div>
      </div>
    </div>
    <el-card class="table-card">
      <el-row>
        <el-col :span="5">
          <el-button icon="el-icon-plus" type="primary" @click="dialogVisible=true">
            新增项目
          </el-button>
        </el-col>
        <el-col :offset="13" :span="6">
          <el-input v-model="queryParams.name" placeholder="输入项目名称搜索" prefix-icon="el-icon-search" @change="queryProjectPage" />
        </el-col>
      </el-row>
      <el-table
        class="mt10"
        :data="projectList"
        style="width: 100%"
        @row-click="handleRowClick"
      >
        <el-table-column
          label="项目名称"
          prop="name"
        />
        <el-table-column
          align="center"
          label="状态"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==1">
              未发布
            </el-tag>
            <el-tag v-if="scope.row.status==2" type="success">
              已发布
            </el-tag>
            <el-tag v-if="scope.row.status==3" type="danger">
              已结束
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
        />
      </el-table>
    </el-card>
    <el-dialog

      title="创建"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="createForm" :model="formData" label-width="100px">
        <el-form-item
          label="名称"
          prop="name"
          :rules="[
            { required: true, message: '名称不能为空'} ]"
        >
          <el-input v-model="formData.name" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="描述"
          prop="description"
        >
          <el-input v-model="formData.description"
                    type="textarea" autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="createFormHandle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {createFormRequest, deleteFormRequest, pageFormRequest, stopFormRequest} from '@/api/project/form'
export default {
  name: "Index",
  data() {
    return {
      formData: {
        description: '',
        name: '问卷名称'
      },
      dialogVisible:false,
      queryParams: {
        current: 1,
        size: 10,
        name: '',
        beginDateTime: null,
        endDateTime: null,
        status: null
      },
      projectList: []
    }
  },
  created() {
    this.queryProjectPage()
  },
  methods:{
    createFormHandle() {
      this.$refs['createForm'].validate((valid) => {
        if (valid) {
          createFormRequest(this.formData).then((res) => {
            this.$router.push({path: '/project/form', query: {key: res.data}})
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleRowClick(row){
      this.$router.push({path: '/project/form/editor', query: {key: row.key}})
    },
    queryProjectPage() {
      pageFormRequest(
        this.queryParams
      ).then((res) => {
        let {records, total, size} = res.data
        this.projectList = records
        this.total = total
        this.queryParams.size = size
        this.projectListLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  //background: var(--color-bg);
  height: calc(100vh - 50px);
}

.header {
  display: flex;
  position: relative;
  padding: 32px;

  .content {
    flex: 1 1;
    margin: 0 auto;
    max-width: 1180px;

    .guide-container {
      display: flex;
      align-items: center;
      height: 264px;
      background: #fff;
      border-radius: 10px;
      padding: 32px;
      position: relative;
      border: 1px solid #dee0e3;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

      .guide-left {
        flex: 1 0 656px;
      }

      .guide-title {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        font-size: 24px;
        line-height: 28px;
        font-weight: 600;
        color: #1f2329;
      }

      .guide-extra {
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 22px;
        color: #646a73;
      }

      .quick-item-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        box-sizing: border-box;

        .quick-item:nth-child(odd) {
          margin-right: 16px;
        }

        .quick-item i {
          width: 16px;
          height: 16px;
        }

        .quick-item {
          position: relative;
          margin-top: 16px;
          padding: 0 16px 0 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex: 1 1 320px;
          height: 48px;
          background: #f5f6f7;
          border-radius: 4px;
          cursor: pointer;

          span {
            flex: 1 1;
            font-size: 14px;
            color: #1f2329;
            line-height: 22px;
          }
        }
      }

      .guide-right {
        flex: 0 1 362px;
        text-align: center;
        margin-left: 53px;

        img {
          width: 80%;
          height: 90%;
        }
      }
    }
  }
}

.table-card {
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 10px;
}

</style>
